<template>
  <el-form ref="form" label-width="100px" :model="form" :inline="inline">
    <el-form-item v-for="item in formLabel" :key="item.label" :label="item.label">
      <div class="flex">
        <el-input class="flex-1" v-if="item.type === 'input'" :placeholder="'请输入'+item.label" v-model="form[item.model]"></el-input>
        <span v-if="item.label === 'VPN用户名'" class="tipcolor">姓名的拼音</span>
      </div>

      <el-switch v-if="item.type === 'switch'" v-model="form[item.model]">-</el-switch>

      <el-date-picker size="small"
                      style="width:100%"
                      type="datetime"
                      v-model="addForm.createDate"
                      v-if="item.type === 'datetime'"
                      :disabled-date="disabledDate"
                      placeholder="">

     </el-date-picker>

     <el-select v-if="item.type === 'select'" placeholder="请选择" v-model="form[item.model]" >
     <el-option v-for=" item in item.opts" :key="item.value" :label="item.label" :value="item.value">

    </el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <slot></slot>
  </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'CommonForm',
  props: {
    formLabel: Array,
    form: Object,
    inline: Boolean,
  },
  data () {
    return {
      name: '123',
      addForm:{
        createDate:new Date()           // 只需要在这里声明的时候直接值赋为 new Date()
      }
    }
  },

  methods: {
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now();
    },
  }

}
</script>

<style>
.tipcolor {
  color: darkseagreen;
  margin-left: 20px;
}
</style>
